<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        
        <script type="text/javascript" src="js/cordova.js"></script>
        
        
        <!-- jquery -->

        <link rel="stylesheet" type="text/css" href="css/jquery/MetroJs.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery/jquery.mobile.structure-1.4.0-rc.1.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery/jquery.mobile-1.4.0-rc.1.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery/samTheme02.min.css" />
        
        <!-- calendar -->
        <link rel="stylesheet" type="text/css" href="css/calendar/fullcalendar.css" />
        
        <script type="text/javascript" src="js/jquery/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jquery/MetroJs.min.js"></script>
        <script type="text/javascript" src="js/jquery/jquery.mobile-1.4.0-rc.1.min.js"></script>
        
        <script type="text/javascript" src="js/calendar/fullcalendar.min.js"></script>
        
        <script>
        $(document).ready(function() {

            // page is now ready, initialize the calendar...

            $('#calendar').fullCalendar({
                // put your options and callbacks here
            })

        });
        </script>

        <title>Testing App</title>
    </head>
    
<body>
	<div data-url="" data-role="page" class="jqm-demos ui-responsive-panel" id="calendarPage">
		<div data-role="header" data-theme="a" >
			<a href="#mypanel"class="ui-btn-left" data-icon="bars">Menu</a>
		    <h1>Window Title</h1>
		</div><!-- /header -->
		
		<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-a ui-panel-animate ui-panel-closed ui-responsive-panel">
        	<div class="ui-panel-inner">
        		<h2>Panel open</h2>
       	 		<!-- panel content goes here -->
       	 		<a data-rel="close">Close Panel</a>
        	</div>

   		</div><!-- /panel -->
		<div data-role="content">
			<div id="calendar" style="width: 70%;">
			</div>
		</div>
	</div>

</body>
</html>